<template>
	<div class="box" :style="{ height: screenHeight, width: screenWidth }">
		<div class="grid-content">
			<div class="public-box">
				<div class="one-grid"></div>
				<div class="two-grid">
					宅-智能停车({{ communityInfo.name }})
				</div>
				<div class="three-grid">总车位数：
					<span class="title3">{{ head.count }}</span>

				</div>
				<div class="three-grid">剩余车位数：
					<span class="title3">{{ head.count - head.present }}</span>
				</div>
				<div class="four-grid">当班应收总额：
					<span class="title3">{{ head.total_amount }}</span>（元）
				</div>
				<div class="four-grid">欢迎您,{{ userInfo.name }} </div>
				<div class="five-grid" @click="changeHanban()">换班</div>
				<!-- <div class="qi-grid">
          <span v-if="peeling === '白色背景'" @click="changeTheme('#1c2536')">(切换)默认背景</span>
          <span v-else @click="changeTheme('#ffffff')">(切换)白色背景</span>
        </div> -->
			</div>
		</div>
		<div class="two-content">
			<div class="two-content-box">
				<div class="vidoes essas">
					<div v-if="!iscamera" class="camera-1">
						<span class="camera-1-1"></span>
					</div>
					<div v-if="iscamera" class="camera-4">
						<iframe :src="'./static/index.html?ip=' + ws" style="width: 100%; height: 100%;" frameborder="0"
							scrolling='no'></iframe>

					</div>
					<div v-else class="camera-2">
						<div class="camera-2-1" v-for="(item, index) in cameraData" :key="index"
							@click="changeCamera(item)">{{ item.name }}{{ item.type == 1 ? '入口' : '出口' }}</div>
					</div>
					<div class="camera-3">
						<span class="camera-3-1" @click="changeCameraqie()"></span>
					</div>
				</div>
				<div class="texts essas" style="margin-left: 2%;">
					<div class="text-1">
						<div class="text-1-1">
							<img v-if="snData.smallimg" :src="snData.smallimg" alt="">
						</div>
						<div class="text-1-2">{{ snData.license }}</div>
					</div>
					<div class="text-2">
						<div class="text-2-1" v-if="snStatus == 1">
							<div>车牌号:{{ snData.license }}</div>
							<div>车辆品牌:--</div>
							<div>车辆颜色:--</div>
							<div>进场时间:{{ snData.create_time }}</div>
							<div>车位号:--</div>
						</div>
						<div class="text-2-2" v-else>
							<div class="text-2-2-1">收费金额:</div>
							<div>车牌号:{{ snData.license }}</div>
							<div>车辆品牌:--</div>
							<div>车辆颜色:--</div>
							<div>进场时间:{{ snData.create_time }}</div>
							<div>出场时间:</div>
							<div>停车时长:{{ getDateTime(snData.entry_time, snData.exit_time) || '-' }}</div>
						</div>
					</div>
				</div>
				<div class="vidoes essas" style="margin-left: 2%;">
					<div v-if="!iscamera1" class="camera-1">
						<span class="camera-1-1"></span>
					</div>
					<div v-if="iscamera1" class="camera-4">
						<iframe :src="'./static/index.html?ip=' + ws1" style="width: 100%; height: 100%;"
							frameborder="0" scrolling='no'></iframe>
					</div>
					<div v-else class="camera-2">
						<div class="camera-2-1" v-for="(item, index) in cameraData" :key="index"
							@click="changeCamera1(item)">{{ item.name }}{{ item.type == 1 ? '入口' : '出口' }}</div>
					</div>
					<div class="camera-3">
						<span class="camera-3-1" @click="changeCameraqie1()"></span>
					</div>
				</div>
				<div class="texts essas" style="margin-left: 2%;">
					<div class="text-1">
						<div class="text-1-1">
							<img v-if="sn1Data.smallimg" :src="sn1Data.smallimg" alt="">
						</div>
						<div class="text-1-2">{{ sn1Data.license }}</div>
					</div>
					<div class="text-2">
						<div class="text-2-1" v-if="sn1Status == 1">
							<div>车牌号:{{ sn1Data.license }}</div>
							<div>车辆品牌:--</div>
							<div>车辆颜色:--</div>
							<div>进场时间:{{ sn1Data.create_time }}</div>
							<div>车位号:--</div>
						</div>
						<div class="text-2-2" v-else>
							<div class="text-2-2-1">收费金额:</div>
							<div>车牌号:{{ sn1Data.license }}</div>
							<div>车辆品牌:--</div>
							<div>车辆颜色:--</div>
							<div>进场时间:{{ sn1Data.create_time }}</div>
							<div>出场时间:</div>
							<div>停车时长:{{ getDateTime(sn1Data.entry_time, sn1Data.exit_time) || '-' }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="three-content">
			<div class="three-content-box">
				<div :class="'bg-img' + bgImg">
					<div class=" three-content-box-1">
						<span class="box-span-1" @click="enter(1)">进出记录</span>
						<span class="box-span-2" @click="enter(2)">当前在场车辆</span>
						<span class="box-span-3" @click="enter(3)">在场无牌车</span>
						<span class="box-span-4" @click="enter(4)">设备连网</span>
						<span class="box-span-4" @click="circumstancesok()">特殊情况出场</span>
						<span class="box-span-4" @click="situationtkok()">未识别车辆入场</span>
						<span class="box-span-5">
							<input type="text" placeholder="请输入搜索类容" v-model="searches" />
							<span class="one" @click="Searches()">
								<img src="../assets/search.png" alt />
							</span>
						</span>
					</div>
					<div class=" three-content-box-2">
						<div class="three-content-box-table" v-if="bgImg == 1">
							<el-table :data="tableData" style="width: 100%">
								<el-table-column prop="license" label="车牌号" min-width="100">
									<template slot-scope="{ row}">
										{{ row.license || '-' }}
									</template>
								</el-table-column>
								<el-table-column prop="rent" label="类型" min-width="100">
									<template slot-scope="{ row}">
										<span v-if="row.rent === 1">临停车</span>
										<span v-else-if="row.rent === 2">私家车</span>
										<span v-else-if="row.rent === 3">月租车</span>
										<span v-else>私家车</span>
									</template>
								</el-table-column>
								<el-table-column prop="mobile" label="联系电话" min-width="120">
									<template slot-scope="{ row}">
										{{ row.mobile || '-' }}
									</template>
								</el-table-column>
								<!-- <el-table-column prop="name"
                                                 label="联系人"
                                                 min-width="100">
                                    <template slot-scope="{ row}">
                                        {{ row.name || '-' }}
                                    </template>
                                </el-table-column> -->
								<el-table-column label="入场时间" min-width="160">
									<template slot-scope="{ row}">
										<span v-if="row.method"> {{ getDate(row.entry_time) || '-' }}</span>
										<span v-else>{{ row.create_time || '-' }}</span>
									</template>
								</el-table-column>
								<el-table-column label="入口" min-width="100">
									<template slot-scope="{ row}">
										<span v-if="row.method && row.inletdoor">{{ row.inletdoor.name || '-' }}</span>
										<span v-else>{{ row.door.name || '-' }}</span>
									</template>
								</el-table-column>
								<el-table-column label="出场时间" min-width="160">
									<template slot-scope="{ row}">
										<span v-if="row.exit_time"> {{ getDate(row.exit_time) || '-' }}</span>
										<span v-else>-</span>
									</template>
								</el-table-column>
								<el-table-column label="出口" min-width="100">
									<template slot-scope="{ row}">
										<span v-if="row.method">{{ row.door.name || '-' }}</span>
										<span v-else>-</span>
									</template>
								</el-table-column>
								<el-table-column label="停车时间" min-width="150">
									<template slot-scope="{ row}">
										<span v-if="row.method">{{ getDateTime(row.entry_time, row.exit_time) || '-'
										}}</span>
										<span v-else>-</span>
									</template>
								</el-table-column>
								<el-table-column prop="money" label="优惠金额" min-width="100">
									<template slot-scope="{row}">
										{{ row.money || '0.00' }}
									</template>
								</el-table-column>
								<el-table-column prop="price" label="收费金额" min-width="100">
									<template slot-scope="{row}">
										{{ row.price || '0.00' }}
									</template>
								</el-table-column>
								<el-table-column prop="camera_internet_state" label="操作" min-width="200">
									<template slot-scope="{row}">
										<span class="btn3" v-if="!row.method" @click="Modifythes(row)">修改</span>
										<span class="btn2" @click="open(row)">开闸</span>

										<span class="btn1" v-if="!row.method" @click="appearing(row)">出场</span>
										<span style='margin-left:10px;' class="btn3" v-if="row.method"
											@click="lookdetail(row)">查看详情</span>
									</template>
								</el-table-column>
							</el-table>
						</div>
						<div class="three-content-box-table" v-if="bgImg == 2">
							<el-table :data="tableData" style="width: 100%">
								<el-table-column prop="license" label="车牌号" min-width="100">
									<template slot-scope="{ row}">
										{{ row.license || '-' }}
									</template>
								</el-table-column>
								<el-table-column prop="rent" label="类型" min-width="100">
									<template slot-scope="{ row}">
										<span v-if="row.rent === 1">临停车</span>
										<span v-else-if="row.rent === 2">私家车</span>
										<span v-else-if="row.rent === 3">月租车</span>
										<span v-else>私家车</span>
									</template>
								</el-table-column>
								<el-table-column prop="mobile" label="联系电话" min-width="100">
									<template slot-scope="{ row}">
										{{ row.mobile || '-' }}
									</template>
								</el-table-column>
								<!-- <el-table-column prop="name"
                                                 label="联系人"
                                                 min-width="100">
                                    <template slot-scope="{ row}">
                                        {{ row.name || '-' }}
                                    </template>
                                </el-table-column> -->
								<el-table-column label="入场时间" min-width="100">
									<template slot-scope="{ row}">
										<span v-if="row.method"> {{ getDate(row.entry_time) || '-' }}</span>
										<span v-else>{{ row.create_time || '-' }}</span>
									</template>
								</el-table-column>
								<el-table-column label="入口" min-width="100">
									<template slot-scope="{ row}">
										<span v-if="row.method">{{ row.inletdoor.name || '-' }}</span>
										<span v-else>{{ row.door.name || '-' }}</span>
									</template>
								</el-table-column>
								<el-table-column prop="camera_internet_state" label="操作" min-width="200">
									<template slot-scope="{row}">
										<span class="btn3" @click="Modifythes(row)">修改</span>
										<span class="btn1" @click="appearing(row)">出场</span>
									</template>
								</el-table-column>
							</el-table>
						</div>
						<div class="three-content-box-table" v-if="bgImg == 3">
							<el-table :data="tableData" stripe style="width: 100%">
								<el-table-column prop="license" label="车牌号" min-width="100">
									<template slot-scope="{ row}">
										{{ row.license || '-' }}
									</template>
								</el-table-column>
								<el-table-column prop="mobile" label="联系电话" min-width="100">
									<template slot-scope="{row}">
										{{ row.mobile || '-' }}
									</template>
								</el-table-column>
								<!-- <el-table-column prop="name"
                                                 label="联系人"
                                                 min-width="100">
                                    <template slot-scope="{row}">
                                        {{ row.name || '-' }}
                                    </template>
                                </el-table-column> -->
								<el-table-column label="入场时间" min-width="100">
									<template slot-scope="{row}">
										<span v-if="row.method"> {{ getDate(row.entry_time) || '-' }}</span>
										<span v-else>{{ row.create_time || '-' }}</span>
									</template>
								</el-table-column>
								<el-table-column label="入口" min-width="100">
									<template slot-scope="{row}">
										<span v-if="row.method">{{ row.inletdoor.name || '-' }}</span>
										<span v-else>{{ row.door.name || '-' }}</span>
									</template>
								</el-table-column>
								<el-table-column prop="camera_internet_state" label="操作" min-width="200">
									<template slot-scope="{row}">
										<span class="btn3" @click="Modifythes(row)">修改</span>
										<span class="btn1" @click="appearing(row)">出场</span>
									</template>
								</el-table-column>
							</el-table>
						</div>
						<div class="three-content-box-table" v-if="bgImg == 4">
							<el-table :data="tableData" style="width: 100%">
								<el-table-column label="设备名称" min-width="100">
									<template slot-scope="{row}">
										{{ row.name || '-' }}
									</template>
								</el-table-column>
								<el-table-column label="设备IP" min-width="100">
									<template slot-scope="{row}">
										{{ row.host || '-' }}
									</template>
								</el-table-column>
								<el-table-column label="设备SN" min-width="100">
									<template slot-scope="{row}">
										{{ row.sn || '-' }}
									</template>
								</el-table-column>
								<el-table-column label="出入口" min-width="100">
									<template slot-scope="{row}">
										<span v-if="row.type === 1">入口</span>
										<span v-else>出口</span>
									</template>
								</el-table-column>
								<el-table-column label="最后识别车牌" min-width="100">
									<template slot-scope="{row}">
										{{ row.lastcar || '-' }}
									</template>
								</el-table-column>
								<el-table-column label="识别时间" min-width="100">
									<template slot-scope="{row}">
										{{ getDate(row.lasttime) || '-' }}
									</template>
								</el-table-column>
							</el-table>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--登录弹框-->
		<el-dialog :visible.sync="dialogVisibleLog" :close-on-click-modal="false" :show-close="false">
			<div class="login">
				<div class="login-titel">
					<div class="login-titel-1">{{ logName }}</div>
					<div v-if="logName == '换班'" class=" login-titel-2" @click="del()">
						<div class="login-titel-2-1"></div>
					</div>
				</div>
				<div class="anount">
					<div class="anount-title">账号:</div>
					<div class="anount-input">
						<el-input v-model="logFrom.mobile" type="text" />
					</div>
				</div>
				<div class="anount">
					<div class="anount-title">密码:</div>
					<div class="anount-input">
						<el-input v-model="logFrom.password" type="password" show-password />
					</div>
				</div>
				<div class="anount">
					<div class="button" @click="logins">下一步</div>
				</div>
			</div>
		</el-dialog>
		<!--小区弹框-->
		<el-dialog width="60%" :visible.sync="dialogVisiblexq" :show-close="false" :close-on-click-modal="false">
			<div class="SelectcarPark">
				<div class="SelectcarPark-titel">选择停车场</div>
				<div class="SelectcarPark-zimu">
					<div @click="selectQb(letter.name)" v-for="letter in letters" :key="letter.id"
						:class="letter.name == '全部' ? 'zimu-2' : 'zimu-1'"
						:style="letter.name == zimu ? 'color:#4f93b1' : ''">
						{{ letter.name }}</div>
				</div>
				<div class="SelectcarPark-name">
					<div :class="communityInfo.id == item.id ? 'SelectcarPark-name-2' : 'SelectcarPark-name-1'"
						@click="wyClickHandler(item)" v-for="(item, index) in communityData" :key="index">
						{{ item.name }}</div>
				</div>
				<div class="SelectcarPark-btn">
					<div class="button" @click="xqnet()">下一步</div>
				</div>
			</div>
		</el-dialog>
		<!--门岗弹框-->
		<el-dialog :visible.sync="dialogVisiblemg" :show-close="false" :close-on-click-modal="false">
			<div class="Choosethepast">
				<div class="Choosethepast-titel">选择{{ communityInfo.name }}停车场的值守门岗</div>

				<div class="checkboxes">
					<div class="checkboxes_one">
						<input @click="allClick()" type="checkbox" v-model="all_checked" />
						<label class="table">全选</label>
					</div>
					<div class="checkboxes_two">
						<span class="check_one" v-for="(item, index) in doorData" :key="index">
							<input v-model="item.checked" type="checkbox" />
							<label class="table">{{ item.name }}</label>
						</span>
					</div>
				</div>
				<div class="button">
					<div class="buttons" @click="summbitdoor">确定</div>
				</div>
			</div>
		</el-dialog>
		<!--出场弹框-->
		<el-dialog :visible.sync="dialogVisibleAppearing" :show-close="false" :close-on-click-modal="false">
			<div class="appearing">
				<div class="login-titel">
					<div class="login-titel-1">出场结算</div>
					<div class=" login-titel-2" @click="dels()">
						<div class="login-titel-2-1"></div>
					</div>
				</div>
				<div class="anount">
					<div class="anount-title">出口:</div>
					<div class="anount-input">
						<el-select class="selectes" :popper-append-to-body="false" popper-class="select-option"
							v-model="outFromSn" placeholder="请选择出口" @change="selectOption">
							<el-option v-for="item in outCameraData" :key="item.id" :label="item.name"
								:value="item.sn"></el-option>
						</el-select>
					</div>
				</div>
				<div class="anount">
					<div class="button" @click="appearingBtn()">确定</div>
				</div>
			</div>
		</el-dialog>
		<!--修改弹框-->
		<el-dialog :visible.sync="dialogVisibleMod" :close-on-click-modal="false" :show-close="false">
			<div class="car-mod">
				<div class="login-titel">
					<div class="login-titel-1">修改车牌号</div>
					<div class=" login-titel-2" @click="modcp()">
						<div class="login-titel-2-1"></div>
					</div>
				</div>
				<div class="anount">
					<div class="anount-title">车牌号:</div>
					<div class="anount-input">
						<el-input v-model="modFrom.license" type="text" @focus="focusj('license')" />
					</div>
				</div>
				<div class="anount">
					<div class="anount-title">电话:</div>
					<div class="anount-input">
						<el-input v-model="modFrom.mobile" @focus="focusj('mobile')" />
					</div>
				</div>
				<div class="anount">
					<div class="button" @click="modBtn()">确定</div>
				</div>
			</div>
			<!--键盘弹框-->
			<div class="keyboard" v-if="dialogVisible">
				<div class="content">
					<div class="content-one">
						<div class="number-one" v-for="(item, index) in inputWord" :key="index"
							@click="numberkey(item)">{{ item
							}}
						</div>
					</div>
					<div class="content-two">
						<div class="number-one" v-for="(item, index) in inputScope" :key="index"
							@click="numberkey(item)">{{
								item == 'I' ? 'I' : item }}</div>
					</div>
				</div>
				<div class="content-number">
					<div class="head">
						<div class="del" @click="delkey()"></div>
					</div>
					<div class="number">
						<div class="number-one" v-for="(item, index) in inputNumber" :key="index"
							@click="numberkey(item)">{{
								item }}
						</div>
					</div>
				</div>
			</div>
		</el-dialog>
		<!--特殊情况出场弹框-->
		<el-dialog :visible.sync="circumstances" :close-on-click-modal="false" :show-close="false">
			<div class="circumstances-mod">
				<div class="login-titel">
					<div class="login-titel-1">特殊情况出场</div>
					<div class=" login-titel-2" @click="circumstancesdel()">
						<div class="login-titel-2-1"></div>
					</div>
				</div>
				<div class="anount">
					<div class="anount-title">车牌号:</div>
					<div class="anount-input">
						<el-input v-model="sumbitFrom.license" type="text" @focus="focucirc('license')" />
					</div>
				</div>
				<div class="anount">
					<div class="anount-title">电话:</div>
					<div class="anount-input">
						<el-input v-model="sumbitFrom.mobile" @focus="focucirc('mobile')" />
					</div>
				</div>
				<div class="anount">
					<div class="anount-title">设备:</div>
					<div class="anount-input">
						<el-select class="selectes" :popper-append-to-body="false" popper-class="select-option"
							v-model="outFromSn" placeholder="请选择出口" @change="selectOption">
							<el-option v-for="item in outCameraData" :key="item.id" :label="item.name"
								:value="item.sn"></el-option>
						</el-select>
					</div>
				</div>
				<div class="anount">
					<div class="button" @click="sumbitAdd()">确定</div>
				</div>
			</div>
			<div class="keyboard" v-if="dialogVisible">
				<div class="content">
					<div class="content-one">
						<div class="number-one" v-for="(item, index) in inputWord" :key="index"
							@click="numberkey(item)">{{ item
							}}
						</div>
					</div>
					<div class="content-two">
						<div class="number-one" v-for="(item, index) in inputScope" :key="index"
							@click="numberkey(item)">{{
								item == 'I' ? 'I' : item }}</div>
					</div>
				</div>
				<div class="content-number">
					<div class="head">
						<div class="del" @click="delkey()"></div>
					</div>
					<div class="number">
						<div class="number-one" v-for="(item, index) in inputNumber" :key="index"
							@click="numberkey(item)">{{
								item }}
						</div>
					</div>
				</div>
			</div>
		</el-dialog>
		<!--特殊情况入场弹框-->
		<el-dialog :visible.sync="situationtk" :close-on-click-modal="false" :show-close="false">
			<div class="circumstances-mod">
				<div class="login-titel">
					<div class="login-titel-1">特殊情况出场</div>
					<div class=" login-titel-2" @click="circumstancesdel()">
						<div class="login-titel-2-1"></div>
					</div>
				</div>
				<div class="anount">
					<div class="anount-title">车牌号:</div>
					<div class="anount-input">
						<el-input v-model="sumbitFrom.license" type="text" @focus="focucirc('license')" />
					</div>
				</div>
				<div class="anount">
					<div class="anount-title">电话:</div>
					<div class="anount-input">
						<el-input v-model="sumbitFrom.mobile" @focus="focucirc('mobile')" />
					</div>
				</div>
				<div class="anount">
					<div class="anount-title">设备:</div>
					<div class="anount-input">
						<el-select class="selectes" :popper-append-to-body="false" popper-class="select-option"
							v-model="outFromSn" placeholder="请选择入口" @change="selectOption">
							<el-option v-for="item in outCameraData" :key="item.id" :label="item.name"
								:value="item.sn"></el-option>
						</el-select>
					</div>
				</div>
				<div class="anount">
					<div class="button" @click="sumbitedail()">确定</div>
				</div>
			</div>
			<div class="keyboard" v-if="dialogVisible">
				<div class="content">
					<div class="content-one">
						<div class="number-one" v-for="(item, index) in inputWord" :key="index"
							@click="numberkey(item)">{{ item
							}}
						</div>
					</div>
					<div class="content-two">
						<div class="number-one" v-for="(item, index) in inputScope" :key="index"
							@click="numberkey(item)">{{
								item == 'I' ? 'I' : item }}</div>
					</div>
				</div>
				<div class="content-number">
					<div class="head">
						<div class="del" @click="delkey()"></div>
					</div>
					<div class="number">
						<div class="number-one" v-for="(item, index) in inputNumber" :key="index"
							@click="numberkey(item)">{{
								item }}
						</div>
					</div>
				</div>
			</div>
		</el-dialog>
		<!-- 查看详情 -->
		<div class="chuangchangjiesuan" v-if="lookFalse">
			<div class="chuangchangjiesuan-one">
				<p class="title">
					收费金额（元）：
					<span>{{ lookDatil.price }}</span>
				</p>
				<div class="input">
					<div>
						<p>车牌号</p>
						<input type="text" :value="lookDatil.license" />
					</div>
					<div>
						<p>电话号码</p>
						<input type="text" :value="lookDatil.mobile" />
					</div>
					<div style="margin-left:33px!important;">
						<p>停车时长</p>
						<input type="text" :value="getDateTime(lookDatil.entry_time, lookDatil.exit_time)" />
					</div>
					<div>
						<p>优惠金额（元）</p>
						<input type="text" :value="lookDatil.money" />
					</div>
				</div>
				<div class="input">
					<div v-if="lookDatil.inletdoor">
						<p>入口</p>
						<input type="text" :value="lookDatil.inletdoor.name" />
					</div>
					<div>
						<p>入场时间</p>
						<input type="text" :value="getDate(lookDatil.entry_time)" />
					</div>
					<div v-if="lookDatil.door" style="margin-left:33px!important;">
						<p>出口</p>
						<input type="text" :value="lookDatil.door.name" />
					</div>
					<div>
						<p>出场时间</p>
						<input type="text" :value="getDate(lookDatil.exit_time)" />
					</div>
				</div>
				<div class="ledes">
					<div class="one">
						<p class="title-one1">入口显示屏内容：</p>
						<div class="ledxianshi">
							<span class="led">{{ lookDatil.inlet_led }}</span>
						</div>
					</div>
					<div class="two">
						<p class="title-one1">出口显示屏内容：</p>
						<div class="ledxianshi">
							<span class="led">{{ lookDatil.export_led }}</span>
						</div>
					</div>
				</div>
				<div class="imgesss">
					<div class="one">
						<!-- <viewer style="z-index:100000000"> -->
						<img style="width:226px;height:186px;" :src="lookDatil.inlet_image" />
						<!-- </viewer> -->
					</div>
					<div class="two right_box_img" style="margin-left: 18px;">
						<div class="two_sdsd" style="overflow: hidden;">
							<img :src="lookDatil.inlet_img" alt />
						</div>
						<div class="two_sdsd1">
							{{ lookDatil.license }}
						</div>
					</div>
					<div class="one" style="margin-left: 36px;">
						<!-- <viewer style="z-index:100000000"> -->
						<img style="width:226px;height:186px;" :src="lookDatil.fullimg" />
						<!-- </viewer> -->
					</div>
					<div class="two right_box_img" style="margin-left: 18px;">
						<div class="two_sdsd" style="overflow: hidden;">
							<img :src="lookDatil.smallimg" alt />
						</div>
						<div class="two_sdsd1">{{ lookDatil.license }}</div>
					</div>
				</div>
				<div style="margin-top:20px">
					<span class="btn_one" @click="lookFalse = false">确认</span>

				</div>
			</div>
		</div>
		<!-- 出场结算 -->
		<div class="chuangchangjiesuan" v-if="boxDataList.length > 0">
			<div class="chuangchangjiesuan-one">
				<p class="title">
					应收金额（元）：
					<span>{{ boxDataList[0].price }}</span>
				</p>
				<div class="input">
					<div>
						<p>车牌号</p>
						<input type="text" :value="boxDataList[0].license" />
					</div>
					<div>
						<p>电话号码</p>
						<input type="text" :value="boxDataList[0].mobile" />
					</div>
					<div style="margin-left:33px!important;">
						<p>停车时长</p>
						<input type="text" :value="getDateTime(boxDataList[0].entry_time, boxDataList[0].exit_time)" />
					</div>
					<div>
						<p>优惠金额（元）</p>
						<input type="text" :value="boxDataList[0].money" />
					</div>
				</div>
				<div class="input">
					<div>
						<p>入口</p>
						<input type="text" :value="boxDataList[0].door_post_name" />
					</div>
					<div>
						<p>入场时间</p>
						<input type="text" :value="boxDataList[0].entryTime" />
					</div>
					<div style="margin-left:33px!important;">
						<p>出口</p>
						<input type="text" :value="boxDataList[0].out_door_post_name" />
					</div>
					<div>
						<p>出场时间</p>
						<input type="text" :value="boxDataList[0].exitTime" />
					</div>
				</div>
				<div class="ledes">
					<div class="one">
						<p class="title-one1">入口显示屏内容：</p>
						<div class="ledxianshi">
							<span class="led">{{ boxDataList[0].inlet_led }}</span>
						</div>
					</div>
					<div class="two">
						<p class="title-one1">出口显示屏内容：</p>
						<div class="ledxianshi">
							<span class="led">{{ boxDataList[0].export_led }}</span>
						</div>
					</div>
				</div>
				<div class="imgesss">
					<div class="one">
						<!-- <viewer style="z-index:100000000"> -->
						<img style="width:226px;height:186px;" :src="boxDataList[0].inlet_image" />
						<!-- </viewer> -->
					</div>
					<div class="two right_box_img" style="margin-left: 18px;">
						<div class="two_sdsd" style="overflow: hidden;">
							<img :src="boxDataList[0].inlet_img" alt />
						</div>
						<div class="two_sdsd1">
							{{ boxDataList[0].license }}
						</div>
					</div>
					<div class="one" style="margin-left: 36px;">
						<!-- <viewer style="z-index:100000000"> -->
						<img style="width:226px;height:186px;" :src="boxDataList[0].fullimg" />
						<!-- </viewer> -->
					</div>
					<div class="two right_box_img" style="margin-left: 18px;">
						<div class="two_sdsd" style="overflow: hidden;">
							<img :src="boxDataList[0].smallimg" alt />
						</div>
						<div class="two_sdsd1">{{ boxDataList[0].license }}</div>
					</div>
				</div>
				<div style="margin-top:20px">
					<span class="btn_one" @click="Confirm">开闸</span>
					<span class="btn_two" @click="openedess">确认收费</span>
				</div>
			</div>
		</div>
		<!--提示音-->
		<el-dialog :visible.sync="romptsound" :show-close="false" :close-on-click-modal="false">
			<div class="appearing">
				<div class="login-titel">
					<div class="login-titel-1">出场结算</div>
					<div class=" login-titel-2" @click="delsromptsound()">
						<div class="login-titel-2-1"></div>
					</div>
				</div>
				<div class="anount">
					<div class="anount-title">提示语:</div>
					<div class="anount-input">
						<el-select class="selectes" :popper-append-to-body="false" popper-class="select-option"
							v-model="prompt" placeholder="请选择提示语">
							<el-option v-for="item in soundData.chu" :key="item" :label="item"
								:value="item"></el-option>
						</el-select>
					</div>
				</div>
				<div class="anount">
					<div class="button" @click="appearingBtnromptsound()">确定</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
// import Camera from './Camera.vue'
// import Cameratwo from './Cameratwo.vue'
import { isEmpty } from '../utils/common.js'
import {
	Login, DoorGet, CameraGet, ListQuery, menuarrmod, menuarrload
	, menuarropen, ListGet, ListDel, menuarradd
} from '../api/api.js'
import { Message } from "element-ui";
export default {
	name: 'HelloWorld',
	//   components: {
	//     Camera,
	//     Cameratwo
	//   },
	data() {
		return {
			ccjiesuan: {},

			chuchangjiesuan: false,
			valueNum: 'license',
			peeling: "默认背景",//切换主题
			screenWidth: document.documentElement.clientWidth - 10 + 'px',//屏幕宽度
			screenHeight: document.documentElement.clientHeight - 10 + 'px',//屏幕高度
			head: {
				count: 0,//车位总数
				present: 0,//剩余车位数
				total_amount: 0.00,//当班应收总额
			},//头部数据
			userInfo: {},//用户信息
			communityData: [],//小区信息
			ws: "",//摄像头1(左边摄像头)
			sn: "",//设备sn1
			ws1: "",//摄像头2(右边摄像头)
			sn1: "",//设备sn2
			snStatus: 1,//1入口2出口
			sn1Status: 2,//1入口2出口
			iscamera: false,//摄像头1
			iscamera1: false,//摄像头2
			snData: {},//左侧车牌数据
			sn1Data: {},//右侧车牌数据
			bgImg: 1,//菜单1进出记录2在场记录3无牌记录4设备
			searches: '',//搜索内容
			tableData: [],//下面列表数据
			dialogVisibleLog: false,//登录弹框
			dialogVisiblexq: false,//小区弹框
			dialogVisiblemg: false,//门岗弹框
			logName: '登录',//登录名
			logFrom: {},//登录信息
			letters: [
				{ id: 0, name: '全部' },
				{ id: 1, name: 'A' },
				{ id: 2, name: 'B' },
				{ id: 3, name: 'C' },
				{ id: 4, name: 'D' },
				{ id: 5, name: 'E' },
				{ id: 6, name: 'F' },
				{ id: 7, name: 'G' },
				{ id: 8, name: 'H' },
				{ id: 9, name: 'I' },
				{ id: 10, name: 'J' },
				{ id: 11, name: 'K' },
				{ id: 12, name: 'L' },
				{ id: 13, name: 'M' },
				{ id: 14, name: 'N' },
				{ id: 15, name: 'O' },
				{ id: 16, name: 'P' },
				{ id: 17, name: 'Q' },
				{ id: 18, name: 'R' },
				{ id: 19, name: 'S' },
				{ id: 20, name: 'T' },
				{ id: 21, name: 'U' },
				{ id: 22, name: 'V' },
				{ id: 23, name: 'W' },
				{ id: 24, name: 'X' },
				{ id: 25, name: 'Y' },
				{ id: 26, name: 'Z' }
			],
			zimu: "全部",//选择的字母
			doorData: [],//门岗数据
			cameraData: [],//摄像头数据
			communityInfo: {},//选择的小区信息
			doorInfo: [],//选择的门岗数据
			all_checked: false,//全选
			dialogVisibleAppearing: false,//出场弹框
			outCameraData: [],//摄像头出口数据
			outFrom: {},//出场数据
			outFromSn: '',//出场设备sn
			dialogVisibleMod: false,//修改弹框
			modFrom: {},//修改信息
			inputNumber: [7, 8, 9, 4, 5, 6, 1, 2, 3, 0, '.'],//数字
			inputWord: ["京", "沪", "浙", "苏", "粤", "鲁", "晋", "冀", "豫", "川", "渝", "辽", "吉", "黑", "皖", "鄂", "津", "贵", "云", "桂", "琼", "青", "新", "藏", "蒙", "宁", "甘", "陕", "闽", "赣", "湘", "港", "澳", "台", "学", "警", "使", "民", "航", "领"],//字
			inputScope: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"],
			dialogVisible: false,//键盘弹框
			Openinggate: false,//开闸弹框
			OpeningName: '入场开闸',
			circumstances: false,
			sumbitFrom: {
				license: "",
				mobile: "",
			},
			valueNumcru: 'license',
			situationtk: false,
			romptsound: false,
			soundData: {},
			prompt: '',
			boxDataList: [],
			lookFalse: false,
			lookDatil: {}
		}
	},
	created() {
		this.init();
		this.clients();
	},
	methods: {
		lookdetail(row) {
			console.log(row)
			this.lookDatil = row
			this.lookFalse = true
		},
		async appearingBtnromptsound() {
			if (this.prompt) {
				const data = await menuarropen({
					sn: this.boxDataList[0].sn,
					id: this.boxDataList[0].id,
					prompt: this.prompt
				})
				console.log(data)
				if (data.status == 'success') {
					this.boxDataList.shift()
					Message.success('开闸成功');
					this.chuchangjiesuan = false
					this.romptsound = false
				} else {
					Message.success(data.message);

				}
			} else {
				Message.warning('请选择提示语');
			}

		},
		delsromptsound() {
			this.romptsound = false
		},
		//打开开闸弹框
		async openedess() {
			// if(item.method){
			//     this.OpeningName='出场开闸'

			// }else{
			//     this.OpeningName='入场开闸'
			// }
			const data = await menuarropen({
				sn: this.boxDataList[0].sn,
				id: this.boxDataList[0].id
			})
			if (data.status == 'success') {
				this.boxDataList.shift()
				Message.success('开闸成功');
				//   this.chuchangjiesuan=false
				this.romptsound = false
			} else {
				Message.success(data.message);

			}
		},
		async Confirm() {

			const data = await menuarrload({

			})
			this.soundData = data.data
			this.romptsound = true



		},
		//特殊情况入场弹框
		situationtkok() {
			this.sumbitFrom = {
				license: '',
				mobile: ''
			}
			this.outCameraData = this.cameraData.filter(item => item.type == 1);
			console.log(this.outCameraData)
			this.situationtk = true
		},
		//特殊入场
		async sumbitedail() {
			const data = await menuarradd({
				sn: this.outFromSn,
				license: this.sumbitFrom.license,
				mobile: this.sumbitFrom.mobile,
			})
			console.log(data)
			if (data.status == 'success') {
				Message.success('入成功');
				this.dialogVisible = false
				this.situationtk = false
			} else {
				Message.success(data.message);

			}
		},
		//特殊出场
		async sumbitAdd() {
			const data = await menuarradd({
				sn: this.outFromSn,
				license: this.sumbitFrom.license,
				mobile: this.sumbitFrom.mobile,
			})
			console.log(data)
			if (data.status == 'success') {
				Message.success('出场成功');
				this.dialogVisible = false
				this.circumstances = false
			} else {
				Message.success(data.message);

			}
		},
		//车牌输入框聚焦打开键盘
		focucirc(item) {
			console.log(this.dialogVisible)
			this.valueNumcru = item
			this.dialogVisible = true
		},
		circumstancesdel() {

			this.circumstances = false

		},
		//特殊情况出场弹框
		circumstancesok() {
			this.sumbitFrom = {
				license: '',
				mobile: ''
			}
			this.outCameraData = this.cameraData.filter(item => item.type == 2);
			console.log(this.outCameraData)
			this.circumstances = true
		},
		//打开开闸弹框
		async open(item) {
			// if(item.method){
			//     this.OpeningName='出场开闸'

			// }else{
			//     this.OpeningName='入场开闸'
			// }
			const data = await menuarropen({
				sn: item.sn,
				id: item.id
			})
			console.log(data)
			if (data.status == 'success') {
				Message.success('开闸成功');
			} else {
				Message.success(data.message);

			}
		},
		//修改车牌号确认
		async modBtn() {

			const data = await menuarrmod({
				id: this.modFrom.id,
				license: this.modFrom.license,
				mobile: this.modFrom.mobile,
				community_id: this.communityInfo.id
			})
			console.log(data, "5555")
			if (data.status == 'success') {
				Message.success('修改成功');
				this.dialogVisible = false
				this.dialogVisibleMod = false
			} else {
				Message.success(data.message);

			}

		},
		//键盘选择
		numberkey(item) {
			if (this.dialogVisibleMod) {
				if (this.valueNum == 'license') {
					if (!this.modFrom.license) {
						this.modFrom.license = item
					} else {
						this.modFrom.license += item
					}
				}
				if (this.valueNum == 'mobile') {
					if (!this.modFrom.mobile) {
						this.modFrom.mobile = item
					} else {
						this.modFrom.mobile += item
					}
				}
			}
			if (this.circumstances) {
				if (this.valueNumcru == 'license') {
					if (!this.sumbitFrom.license) {
						this.sumbitFrom.license = item
					} else {
						this.sumbitFrom.license += item
					}
				}
				if (this.valueNumcru == 'mobile') {
					if (!this.sumbitFrom.mobile) {
						this.sumbitFrom.mobile = item
					} else {
						this.sumbitFrom.mobile += item
					}
				}
			}
			if (this.situationtk) {
				if (this.valueNumcru == 'license') {
					if (!this.sumbitFrom.license) {
						this.sumbitFrom.license = item
					} else {
						this.sumbitFrom.license += item
					}
				}
				if (this.valueNumcru == 'mobile') {
					if (!this.sumbitFrom.mobile) {
						this.sumbitFrom.mobile = item
					} else {
						this.sumbitFrom.mobile += item
					}
				}
			}
		},
		//关闭键盘弹框
		delkey() {
			this.dialogVisible = false
		},
		//车牌输入框聚焦打开键盘
		focusj(item) {
			this.valueNum = item
			this.dialogVisible = true
		},
		//点击选择修改车牌
		choose(p) {
			this.myData[this.nowIpnut] = p;
			var item = this.checkOrder[this.nowIpnut]
		},
		//在场修改
		Modifythes(item) {
			this.dialogVisibleMod = true;
			const { id, license, mobile } = item
			this.$set(this.modFrom, 'id', id)
			this.$set(this.modFrom, 'license', license)
			this.$set(this.modFrom, 'mobile', mobile)
		},
		//出场弹框确定
		async appearingBtn() {
			if (isEmpty(this.outFromSn)) {
				Message.error('请选择出口');
				return;
			}
			let data = await ListDel(this.outFrom);
			if (data.status == "success") {
				Message.success('出场结算成功');
				this.dels();
				this.Searches()
			}
		},
		//当下拉选择框值变化触发
		selectOption() {
			this.outFrom.sn = this.outFromSn
		},
		//点击取消出场结算弹框
		dels() {
			this.dialogVisibleAppearing = false;
		},
		//点击出场
		appearing(item) {
			this.outFrom.id = item.id;
			this.outFrom.community_id = this.communityInfo.id;
			this.dialogVisibleAppearing = true;
			this.outCameraData = this.cameraData.filter(item => item.type == 2);
		},
		//点击菜单展示数据列表
		enter(item) {
			this.bgImg = item
			this.tableData = [];
			this.Searches()
		},
		//获取列表数据
		async Searches() {
			let data = await ListQuery({
				community_id: this.communityInfo.id,
				user_id: this.userInfo.id,
				type: this.bgImg,
				name: this.searches,
			})
			if (data.status == "success") {
				this.tableData = data.data;
			}
		},
		//点击换班
		changeHanban() {
			this.dialogVisibleLog = true;
			this.logName = '换班';
		},
		//点击切换摄像头
		changeCameraqie1() {
			this.sn1 = '';
			this.ws1 = '';
			this.sn1Status = '';
			this.iscamera1 = false;
		},
		//右边边选择摄像头
		changeCamera1(item) {
			console.log(item)
			this.sn1 = item.sn;
			this.ws1 = item.host;
			this.sn1Status = item.type;
			this.iscamera1 = true;
			// setTimeout(() => {
			// 	this.$refs.cameratwo.init();
			// }, 500)
		},
		//点击切换摄像头
		changeCameraqie() {
			this.sn = '';
			this.ws = '';
			this.snStatus = '';
			this.iscamera = false;
		},
		//左边选择摄像头
		changeCamera(item) {
			console.log(item)
			this.sn = item.sn;
			this.ws = item.host;
			this.snStatus = item.type;
			this.iscamera = true;
			// setTimeout(() => {
			// 	this.$refs.camera.init();
			// }, 500)
		},
		//获取摄像头列表
		async camera() {
			this.iscamera = false;//摄像头1
			this.iscamera1 = false;//摄像头
			let data = await CameraGet({
				user_id: this.userInfo.id,
				community_id: this.communityInfo.id,
				token: this.userInfo.token,
				door: JSON.stringify(this.doorInfo)
			});
			if (data.status == "success") {
				this.dialogVisiblemg = false;
				this.cameraData = data.data;
				this.head = data.list
			}
		},
		//点击门岗确定
		summbitdoor() {
			this.doorInfo = this.doorData.filter(item => item.checked == true);
			if (isEmpty(this.doorInfo)) {
				Message.error('请选择门岗');
			}
			localStorage.setItem('doorInfo', JSON.stringify(this.doorInfo));
			this.camera();
			this.Searches()
		},
		//点击门岗全选
		allClick() {
			this.doorData.forEach(item => {
				if (this.all_checked == false) {
					item.checked = true;
				} else {
					item.checked = false;
				}
			});
		},
		//点击小区下一步
		async xqnet() {
			if (isEmpty(this.communityInfo)) {
				Message.error('请选择小区');
				return;
			}
			localStorage.setItem('communityInfo', JSON.stringify(this.communityInfo));
			this.getDoor();
			this.dialogVisiblexq = false;
		},
		//获取门岗列表
		async getDoor() {
			let data = await DoorGet({ id: this.communityInfo.id });
			if (data.status == "success") {
				this.doorData = data.data;
				localStorage.setItem('doorData', JSON.stringify(data.data));
				this.dialogVisiblemg = true;
			}
		},
		//选择停车场
		wyClickHandler(item) {
			this.communityInfo = item;
		},
		//选择字母
		selectQb(name) {
			this.zimu = name;
			if (name === '全部') {
				this.communityData = this.userInfo.community;
				return;
			}
			this.communityData = this.userInfo.community.filter(item => item.acronym === name);
		},
		//点击取消登录弹框
		del() {
			this.dialogVisibleLog = false;
		},
		//登录
		async logins() {
			this.iscamera = false;//摄像头1
			this.iscamera1 = false;//摄像头
			let data = await Login(this.logFrom);
			if (data.status == "success") {
				this.userInfo = data.data;
				this.communityData = data.data.community;
				localStorage.setItem('userInfo', JSON.stringify(data.data));
				this.del();
				this.mqtt(data.data.token);
				this.dialogVisiblexq = true;
			}
		},
		//修改弹框取消
		modcp() {
			this.dialogVisibleMod = !this.dialogVisibleMod
		},
		//初始化数据
		init() {
			let user = JSON.parse(localStorage.getItem('userInfo'));

			if (isEmpty(user)) {
				this.dialogVisibleLog = true;
				return;
			}
			this.userInfo = user;
			this.mqtt(user.token);
			this.communityData = user.community;
			let community = JSON.parse(localStorage.getItem('communityInfo'));
			if (isEmpty(community)) {
				this.dialogVisiblexq = true;
				return;
			}
			this.communityInfo = community;
			let doorInfo = JSON.parse(localStorage.getItem('doorInfo'));
			if (isEmpty(doorInfo)) {
				this.getDoor();
				this.dialogVisiblemg = true;
				return;
			}
			this.doorInfo = doorInfo;
			this.camera();
			this.Searches();
		},
		// 切换主题方式1：修改全局CSS变量
		changeTheme(color) {
			if (color === '#ffffff') {
				this.peeling = "白色背景"
				document.documentElement.style.setProperty("--background_color", '#ffffff');
				document.documentElement.style.setProperty("--size_color", '#000000');
			} else {
				this.peeling = "默认背景"
				document.documentElement.style.setProperty("--background_color", '#1c2536');
				document.documentElement.style.setProperty("--size_color", '#edebeb');
			}
		},
		//mqtt监听接收
		clients() {
			let that = this;
			that.$pubic.mqtt = async (topic, message) => {
				try {
					let item = JSON.parse(message)
					console.log('接收推送信息:', item)
					console.log(item.status, "判断")
					if (item.status == 1) {
						this.boxDataList.forEach((option, index) => {
							if (option.license == item.license) {
								this.boxDataList.splice(index, 1)
							}
						})
						//   this.chuchangjiesuan=false
					} else {
						let data = await ListGet(item);
						let resp = await CameraGet({
							user_id: this.userInfo.id,
							community_id: this.communityInfo.id,
							token: this.userInfo.token,
							door: JSON.stringify(this.doorInfo)
						});
						if (resp.status == "success") {
							this.head = resp.list
						}
						if (data.data.sn == this.sn) {
							this.snData = data.data
						}
						if (data.data.sn == this.sn1) {
							this.sn1Data = data.data
						}
						if (data.status == "success" && that.bgImg != 4) {
							that.tableData.unshift(data.data)
						}
						if (data.data.price && Number(data.data.price) > 0) {
							this.boxDataList.unshift(data.data)
							this.boxDataList.forEach(itnes => {
								itnes.exitTime = this.getDate(itnes.exit_time)
								itnes.entryTime = this.getDate(itnes.entry_time)
							})
						}
					}
				} catch (e) {
					console.log("Caught: " + e.message)
				}
			}
		},
		//mqtt订阅
		mqtt(clientId) {
			this.$client.subscribe(clientId, (err) => {
				console.log('订阅成功!' + clientId)
			})
		},
		//时间戳转日期
		getDate(date) {
			if (isEmpty(date)) {
				return '';
			}
			var date = new Date(date * 1000); // 参数需要毫秒数，所以这里将秒数乘于 1000
			var Y = date.getFullYear() + '-';
			var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			var D = date.getDate() + ' ';
			var h = date.getHours() + ':';
			var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
			var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			return Y + M + D + h + m + s;
		},
		//计算两个时间差
		getDateTime(date1, date2) {
			if (isEmpty(date1) || isEmpty(date2)) {
				return '';
			}
			//计算
			var m = 0;
			let s = Number(date2) - Number(date1);
			m = Math.ceil(s / 60);
			s = Math.abs(s - m * 60);
			var h = Math.floor(m / 60);
			m = m - h * 60;
			return h + "小时" + m + "分" + s + "秒";
		},
	}
}
</script>

<style lang="less" scoped>
.box {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	position: absolute;
	color: var(--size_color1);
	font-size: calc(100vw * 18 / 1920);

	.grid-content {
		width: 100%;
		height: 7%;
		line-height: 64px;
		background: var(--background_color);
		border: 2px solid var(--border_color);
		display: flex;
		align-items: center;

		.public-box {
			margin-left: 2%;
			width: 96%;
			height: 60%;
			float: left;
			display: flex;
			align-items: center;

			div {
				float: left;
				height: 100%;
			}

			.one-grid {
				width: 2.5%;
				height: 90%;
				background: url(../assets/logo.png) no-repeat;
				background-size: 100% 100%;
			}

			.two-grid {
				width: 15%;
				display: flex;
				overflow: hidden;
				align-items: center;
			}

			.three-grid {
				margin-left: 1%;
				width: 10%;
				display: flex;
				overflow: hidden;
				align-items: center;
				font-weight: 400;
				color: var(--size_color1);

				.title3 {
					font-weight: 400;
					color: var(--size_color2);
				}
			}

			.four-grid {
				margin-left: 1%;
				width: 12%;
				display: flex;
				overflow: hidden;
				align-items: center;
				font-weight: 400;
				color: var(--size_color1);

				.title3 {
					font-weight: 400;
					color: var(--size_color2);
				}
			}

			.five-grid {
				width: 3%;
				height: 50%;
				display: flex;
				overflow: hidden;
				align-items: center;
				justify-content: center;
				margin-left: auto;
				margin-right: 3%;
				font-weight: 400;
				color: var(--size_color1);
				border: 2px solid var(--border_color);
			}

			.qi-grid {
				width: 7%;
				height: 50%;
				margin-right: 3%;
				display: flex;
				overflow: hidden;
				align-items: center;
				justify-content: center;
				border: 2px solid var(--border_color);
				color: var(--size_color1);
			}
		}
	}

	.two-content {
		width: 100%;
		height: 43%;
		background: var(--background_color);
		display: flex;
		justify-content: center;
		align-items: center;

		.two-content-box {
			width: 98%;
			height: 95%;
			display: flex;
			justify-content: center;
			align-items: center;

			.essas {
				float: left;
			}

			.vidoes {
				width: 32%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;
				background: url(../assets/jiao1.png) no-repeat;
				background-size: 100% 100%;

				.camera-1 {
					width: 100%;
					height: 10%;
					z-index: 999;
					display: flex;
					align-items: center;

					.camera-1-1 {
						width: 8%;
						height: 70%;
						margin-left: 2%;
						float: left;
						background: url(../assets/live.png) no-repeat;
						background-size: 100% 100%;
					}
				}

				.camera-4 {
					width: 100%;
					height: 90%;
					display: flex;
					flex-wrap: wrap;


				}

				.camera-2 {
					width: 100%;
					height: 80%;
					display: flex;
					flex-wrap: wrap;
					overflow: auto;

					.camera-2-1 {
						width: 25%;
						margin-left: 6%;
						margin-top: 5%;
						height: 20%;
						display: flex;
						justify-content: center;
						align-items: center;
						float: left;
						background: url(../assets/car_img_xiaoqu.png) no-repeat;
						background-size: 100% 100%;
					}
				}

				/*修改滚动条样式*/
				.camera-2::-webkit-scrollbar {
					width: 10px;
					height: 10px;
					/**/
				}

				.camera-2::-webkit-scrollbar-track {
					border-radius: 2px;
				}

				.camera-2::-webkit-scrollbar-thumb {
					background: #4f93b1;
					border-radius: 10px;
				}

				.camera-2::-webkit-scrollbar-thumb:hover {
					background: #4f93b1;
				}

				.camera-2::-webkit-scrollbar-corner {
					background: #4f93b1;
				}

				.camera-3 {
					width: 100%;
					height: 10%;
					z-index: 999;
					display: flex;
					margin-top: auto;
					align-items: center;

					.camera-3-1 {
						width: 8%;
						height: 70%;
						margin-right: 2%;
						display: flex;
						margin-left: auto;
						background: url(../assets/carphoto.png) no-repeat;
						background-size: 100% 100%;
					}
				}
			}

			.texts {
				width: 14%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;

				.text-1 {
					width: 100%;
					height: 48%;
					background: url(../assets/jiao2.png) no-repeat;
					background-size: 100% 100%;
					display: flex;
					margin-bottom: auto;
					justify-content: center;
					flex-wrap: wrap;

					.text-1-1 {
						width: 100%;
						height: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-bottom: auto;
						font-weight: 400;
						text-align: center;

						img {
							width: 100%;
							height: 100%;
						}
					}

					.text-1-2 {
						width: 90%;
						height: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-top: auto;
						font-weight: 800;
						color: var(--size_color1);
						font-size: calc(100vw * 42 / 1920);
						text-align: center;
					}
				}

				.text-2 {
					width: 100%;
					height: 48%;
					display: flex;
					margin-top: auto;
					background: url(../assets/jiao3.png) no-repeat;
					background-size: 100% 100%;

					.text-2-1 {
						width: 100%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-wrap: wrap;

						div {
							width: 90%;
							height: 20%;
							display: flex;
							align-items: center;
							font-size: calc(100vw * 14 / 1920);
						}
					}

					.text-2-2 {
						width: 100%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-wrap: wrap;

						div {
							width: 90%;
							height: 10%;
							display: flex;
							align-items: center;
							font-size: calc(100vw * 14 / 1920);
						}

						.text-2-2-1 {
							font-size: calc(100vw * 18 / 1920);
						}
					}
				}
			}
		}
	}

	.three-content {
		width: 100%;
		height: 50%;
		background: var(--background_color);
		display: flex;
		justify-content: center;
		align-items: center;

		.three-content-box {
			width: 96%;
			height: 95%;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;

			.bg-img1 {
				width: 100%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				background: url(../assets/jinchu-sel.png) no-repeat;
				background-size: 100% 100%;

				.three-content-box-1 {
					width: 100%;
					height: 8%;
					display: flex;

					.box-span-1 {
						width: 7%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
					}

					.box-span-2 {
						width: 9%;
						height: 100%;
						margin-left: 1.2%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
						float: left;
					}

					.box-span-3 {
						width: 9%;
						height: 100%;
						margin-left: 1.2%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
					}

					.box-span-4 {
						width: 7%;
						height: 100%;
						margin-left: 1.2%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
					}

					.box-span-5 {
						width: 17.2%;
						height: 100%;
						display: flex;
						margin-left: auto;
						justify-content: center;
						align-items: center;
						text-align: center;

						input {
							width: 100%;
							height: 80%;
							background: transparent !important;
							font-size: 14px;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: var(--size_color2);
							outline: none;
							border: 0px;
						}

						input::-webkit-input-placeholder {
							color: var(--size_color2);
						}

						.one {
							display: flex;
							width: 20%;
							margin-left: auto;
							align-items: center;
							text-align: center;
						}
					}
				}

				.three-content-box-2 {
					width: 100%;
					height: 90%;
					display: flex;
					overflow: auto;

					.three-content-box-table {
						width: 100%;
						height: 100%;
						display: flex;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;

						/deep/.el-table {
							background: transparent !important;
							color: var(--size_color);

							.cell {
								padding-left: 34px !important;
							}

							tr {
								background-color: transparent !important;

								td {
									border-bottom: none;
								}
							}

							.has-gutter {
								color: rgba(122, 230, 255, 1);

								th {
									background-color: transparent !important;
									border-bottom: none;
								}
							}

							.el-table__body-wrapper {
								height: 319px;
								overflow-y: auto;
							}

							/*修改滚动条样式*/
							.el-table__body-wrapper::-webkit-scrollbar {
								width: 10px;
								height: 10px;
								/**/
							}

							.el-table__body-wrapper::-webkit-scrollbar-track {
								border-radius: 2px;
							}

							.el-table__body-wrapper::-webkit-scrollbar-thumb {
								background: #4f93b1;
								border-radius: 10px;
							}

							.el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
								background: #4f93b1;
							}

							.el-table__body-wrapper::-webkit-scrollbar-corner {
								background: #4f93b1;
							}
						}

						/deep/.el-table::before {
							background-color: transparent !important;
						}

						/deep/ .el-table--enable-row-hover .el-table__body tr:hover>td {
							background-color: #2c5379 !important;
						}
					}
				}

				/*修改滚动条样式*/
				.three-content-box-2::-webkit-scrollbar {
					width: 10px;
					height: 10px;
					/**/
				}

				.three-content-box-2::-webkit-scrollbar-track {
					border-radius: 2px;
				}

				.three-content-box-2::-webkit-scrollbar-thumb {
					background: #4f93b1;
					border-radius: 10px;
				}

				.three-content-box-2::-webkit-scrollbar-thumb:hover {
					background: #4f93b1;
				}

				.three-content-box-2::-webkit-scrollbar-corner {
					background: #4f93b1;
				}
			}

			.bg-img2 {
				width: 100%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				background: url(../assets/dangqian.png) no-repeat;
				background-size: 100% 100%;

				.three-content-box-1 {
					width: 100%;
					height: 8%;
					display: flex;

					.box-span-1 {
						width: 7%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
					}

					.box-span-2 {
						width: 9%;
						height: 100%;
						margin-left: 1.2%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
						float: left;
					}

					.box-span-3 {
						width: 9%;
						height: 100%;
						margin-left: 1.2%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
					}

					.box-span-4 {
						width: 7%;
						height: 100%;
						margin-left: 1.2%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
					}

					.box-span-5 {
						width: 17.2%;
						height: 100%;
						display: flex;
						margin-left: auto;
						justify-content: center;
						align-items: center;
						text-align: center;

						input {
							width: 100%;
							height: 80%;
							background: transparent !important;
							font-size: 14px;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: var(--size_color2);
							outline: none;
							border: 0px;
						}

						input::-webkit-input-placeholder {
							color: var(--size_color2);
						}

						.one {
							display: flex;
							width: 20%;
							margin-left: auto;
							align-items: center;
							text-align: center;
						}
					}
				}

				.three-content-box-2 {
					width: 100%;
					height: 90%;
					display: flex;
					overflow: auto;

					.three-content-box-table {
						width: 100%;
						height: 100%;
						display: flex;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;

						/deep/.el-table {
							background: transparent !important;
							color: var(--size_color);

							.cell {
								padding-left: 34px !important;
							}

							tr {
								background-color: transparent !important;

								td {
									border-bottom: none;
								}
							}

							.has-gutter {
								color: rgba(122, 230, 255, 1);

								th {
									background-color: transparent !important;
									border-bottom: none;
								}
							}

							.el-table__body-wrapper {
								height: 319px;
								overflow-y: auto;
							}

							/*修改滚动条样式*/
							.el-table__body-wrapper::-webkit-scrollbar {
								width: 10px;
								height: 10px;
								/**/
							}

							.el-table__body-wrapper::-webkit-scrollbar-track {
								border-radius: 2px;
							}

							.el-table__body-wrapper::-webkit-scrollbar-thumb {
								background: #4f93b1;
								border-radius: 10px;
							}

							.el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
								background: #4f93b1;
							}

							.el-table__body-wrapper::-webkit-scrollbar-corner {
								background: #4f93b1;
							}
						}

						/deep/.el-table::before {
							background-color: transparent !important;
						}

						/deep/ .el-table--enable-row-hover .el-table__body tr:hover>td {
							background-color: #2c5379 !important;
						}
					}
				}

				/*修改滚动条样式*/
				.three-content-box-2::-webkit-scrollbar {
					width: 10px;
					height: 10px;
					/**/
				}

				.three-content-box-2::-webkit-scrollbar-track {
					border-radius: 2px;
				}

				.three-content-box-2::-webkit-scrollbar-thumb {
					background: #4f93b1;
					border-radius: 10px;
				}

				.three-content-box-2::-webkit-scrollbar-thumb:hover {
					background: #4f93b1;
				}

				.three-content-box-2::-webkit-scrollbar-corner {
					background: #4f93b1;
				}
			}

			.bg-img3 {
				width: 100%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				background: url(../assets/wupai.png) no-repeat;
				background-size: 100% 100%;

				.three-content-box-1 {
					width: 100%;
					height: 8%;
					display: flex;

					.box-span-1 {
						width: 7%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
					}

					.box-span-2 {
						width: 9%;
						height: 100%;
						margin-left: 1.2%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
						float: left;
					}

					.box-span-3 {
						width: 9%;
						height: 100%;
						margin-left: 1.2%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
					}

					.box-span-4 {
						width: 7%;
						height: 100%;
						margin-left: 1.2%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
					}

					.box-span-5 {
						width: 17.2%;
						height: 100%;
						display: flex;
						margin-left: auto;
						justify-content: center;
						align-items: center;
						text-align: center;

						input {
							width: 100%;
							height: 80%;
							background: transparent !important;
							font-size: 14px;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: var(--size_color2);
							outline: none;
							border: 0px;
						}

						input::-webkit-input-placeholder {
							color: var(--size_color2);
						}

						.one {
							display: flex;
							width: 20%;
							margin-left: auto;
							align-items: center;
							text-align: center;
						}
					}
				}

				.three-content-box-2 {
					width: 100%;
					height: 90%;
					display: flex;
					overflow: auto;

					.three-content-box-table {
						width: 100%;
						height: 100%;
						display: flex;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;

						/deep/.el-table {
							background: transparent !important;
							color: var(--size_color);

							.cell {
								padding-left: 34px !important;
							}

							tr {
								background-color: transparent !important;

								td {
									border-bottom: none;
								}
							}

							.has-gutter {
								color: rgba(122, 230, 255, 1);

								th {
									background-color: transparent !important;
									border-bottom: none;
								}
							}

							.el-table__body-wrapper {
								height: 319px;
								overflow-y: auto;
							}

							/*修改滚动条样式*/
							.el-table__body-wrapper::-webkit-scrollbar {
								width: 10px;
								height: 10px;
								/**/
							}

							.el-table__body-wrapper::-webkit-scrollbar-track {
								border-radius: 2px;
							}

							.el-table__body-wrapper::-webkit-scrollbar-thumb {
								background: #4f93b1;
								border-radius: 10px;
							}

							.el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
								background: #4f93b1;
							}

							.el-table__body-wrapper::-webkit-scrollbar-corner {
								background: #4f93b1;
							}
						}

						/deep/.el-table::before {
							background-color: transparent !important;
						}

						/deep/ .el-table--enable-row-hover .el-table__body tr:hover>td {
							background-color: #2c5379 !important;
						}
					}
				}

				/*修改滚动条样式*/
				.three-content-box-2::-webkit-scrollbar {
					width: 10px;
					height: 10px;
					/**/
				}

				.three-content-box-2::-webkit-scrollbar-track {
					border-radius: 2px;
				}

				.three-content-box-2::-webkit-scrollbar-thumb {
					background: #4f93b1;
					border-radius: 10px;
				}

				.three-content-box-2::-webkit-scrollbar-thumb:hover {
					background: #4f93b1;
				}

				.three-content-box-2::-webkit-scrollbar-corner {
					background: #4f93b1;
				}
			}

			.bg-img4 {
				width: 100%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				background: url(../assets/shebei.png) no-repeat;
				background-size: 100% 100%;

				.three-content-box-1 {
					width: 100%;
					height: 8%;
					display: flex;

					.box-span-1 {
						width: 7%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
					}

					.box-span-2 {
						width: 9%;
						height: 100%;
						margin-left: 1.2%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
						float: left;
					}

					.box-span-3 {
						width: 9%;
						height: 100%;
						margin-left: 1.2%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
					}

					.box-span-4 {
						width: 7%;
						height: 100%;
						margin-left: 1.2%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
					}

					.box-span-5 {
						width: 17.2%;
						height: 100%;
						display: flex;
						margin-left: auto;
						justify-content: center;
						align-items: center;
						text-align: center;

						input {
							width: 100%;
							height: 80%;
							background: transparent !important;
							font-size: 14px;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: var(--size_color2);
							outline: none;
							border: 0px;
						}

						input::-webkit-input-placeholder {
							color: var(--size_color2);
						}

						.one {
							display: flex;
							width: 20%;
							margin-left: auto;
							align-items: center;
							text-align: center;
						}
					}
				}

				.three-content-box-2 {
					width: 100%;
					height: 90%;
					display: flex;
					overflow: auto;

					.three-content-box-table {
						width: 100%;
						height: 100%;
						display: flex;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;

						/deep/.el-table {
							background: transparent !important;
							color: var(--size_color);

							.cell {
								padding-left: 34px !important;
							}

							tr {
								background-color: transparent !important;

								td {
									border-bottom: none;
								}
							}

							.has-gutter {
								color: rgba(122, 230, 255, 1);

								th {
									background-color: transparent !important;
									border-bottom: none;
								}
							}

							.el-table__body-wrapper {
								height: 319px;
								overflow-y: auto;
							}

							/*修改滚动条样式*/
							.el-table__body-wrapper::-webkit-scrollbar {
								width: 10px;
								height: 10px;
								/**/
							}

							.el-table__body-wrapper::-webkit-scrollbar-track {
								border-radius: 2px;
							}

							.el-table__body-wrapper::-webkit-scrollbar-thumb {
								background: #4f93b1;
								border-radius: 10px;
							}

							.el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
								background: #4f93b1;
							}

							.el-table__body-wrapper::-webkit-scrollbar-corner {
								background: #4f93b1;
							}
						}

						/deep/ .el-table::before {
							background-color: transparent !important;
						}

						/deep/ .el-table--enable-row-hover .el-table__body tr:hover>td {
							background-color: #2c5379 !important;
						}
					}
				}

				/*修改滚动条样式*/
				.three-content-box-2::-webkit-scrollbar {
					width: 10px;
					height: 10px;
					/**/
				}

				.three-content-box-2::-webkit-scrollbar-track {
					border-radius: 2px;
				}

				.three-content-box-2::-webkit-scrollbar-thumb {
					background: #4f93b1;
					border-radius: 10px;
				}

				.three-content-box-2::-webkit-scrollbar-thumb:hover {
					background: #4f93b1;
				}

				.three-content-box-2::-webkit-scrollbar-corner {
					background: #4f93b1;
				}
			}
		}
	}

	/deep/ .el-dialog {
		z-index: 9999;
		position: relative;
		border-radius: 2px;
		box-sizing: border-box;
		background: transparent !important;

		.el-dialog__header {
			display: none;
		}

		.el-dialog__body {
			word-break: break-all;
			padding: 0 !important;

			.el-input__inner {
				border-radius: 4px;
				border: 1px solid var(--border_color);
				box-sizing: border-box;
				color: #606266;
				display: inline-block;
				font-size: inherit;
				width: 100%;
				background: transparent !important;
			}

			.login {
				background: url(../assets/bg.png) no-repeat;
				background-size: 100% 100%;
				width: 315px;
				height: 370px;
				margin: 0 auto;
				z-index: 9999;

				.login-titel {
					width: 100%;
					height: 17%;
					display: flex;
					font-size: calc(100vw * 28 / 1920);
					color: var(--size_color1);

					.login-titel-1 {
						width: 85%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.login-titel-2 {
						width: 15%;
						height: 100%;
						display: flex;
						justify-content: center;

						.login-titel-2-1 {
							width: 23px;
							height: 23px;
							display: flex;
							justify-content: center;
							margin-top: 12%;
							background: url(../assets/car_buttom_delete.png) no-repeat;
							background-size: 100% 100%;
						}
					}
				}

				.anount {
					width: 100%;
					height: 26%;
					flex-wrap: wrap;
					font-size: calc(100vw * 22 / 1920);

					.anount-title {
						width: 100%;
						height: 30%;
						display: flex;
						align-items: center;
						color: var(--size_color1);
						text-indent: 2em;
						font-size: calc(100vw * 22 / 1920);
					}

					.anount-input {
						width: 90%;
						height: 40%;
						margin: 0 auto;
					}

					.button {
						width: 40%;
						height: 30%;
						display: flex;
						border-radius: 4px;
						justify-content: center;
						align-items: center;
						margin: 0 auto;
						margin-top: 10%;
						color: var(--size_color);
						background: rgba(79, 147, 177, 1);
						font-weight: 400;
					}
				}
			}

			.SelectcarPark {
				background: url(../assets/bg1.png) no-repeat;
				background-size: 100% 100%;
				width: 100%;
				height: 500px;
				display: flex;
				flex-wrap: wrap;
				margin: 0 auto;

				.SelectcarPark-titel {
					width: 100%;
					height: 10%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: calc(100vw * 32 / 1920);
					color: var(--size_color1);
				}

				.SelectcarPark-zimu {
					width: 100%;
					height: 10%;
					display: flex;
					align-items: center;
					box-sizing: border-box;
					font-size: calc(100vw * 14 / 1920);

					.zimu-1 {
						width: 2%;
						height: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: 1%;
						font-weight: 600;
						color: var(--size_color);
						font-size: calc(100vw * 20 / 1920);
					}

					.zimu-1:hover {
						color: var(--size_color1);
					}

					.zimu-2 {
						width: 4%;
						height: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: 2%;
						font-weight: 600;
						color: var(--size_color);
						font-size: calc(100vw * 20 / 1920);
					}

					.zimu-2:hover {
						color: var(--size_color1);
					}
				}

				.SelectcarPark-name {
					width: 98%;
					height: 60%;
					overflow: auto;
					display: flex;
					flex-wrap: wrap;
					font-size: calc(100vw * 18 / 1920);

					.SelectcarPark-name-1 {
						float: left;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 20%;
						height: 20%;
						font-size: calc(100vw * 30 / 1920);
						background: url(../assets/car_img_xiaoqu.png) no-repeat;
						background-size: 100% 100%;
						margin-left: 4%;
						margin-top: 4%;
						color: var(--size_color1);
					}

					.SelectcarPark-name-2 {
						float: left;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 20%;
						height: 20%;
						font-size: calc(100vw * 30 / 1920);
						background: url(../assets/car_img_xiaoqu1.png);
						background-size: 100% 100%;
						margin-left: 4%;
						margin-top: 4%;
						color: var(--size_color1);
					}
				}

				/*修改滚动条样式*/
				.SelectcarPark-name::-webkit-scrollbar {
					width: 10px;
					height: 10px;
					/**/
				}

				.SelectcarPark-name::-webkit-scrollbar-track {
					border-radius: 2px;
				}

				.SelectcarPark-name::-webkit-scrollbar-thumb {
					background: #4f93b1;
					border-radius: 10px;
				}

				.SelectcarPark-name::-webkit-scrollbar-thumb:hover {
					background: #4f93b1;
				}

				.SelectcarPark-name::-webkit-scrollbar-corner {
					background: #4f93b1;
				}

				.SelectcarPark-btn {
					width: 100%;
					height: 20%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: calc(100vw * 18 / 1920);

					.button {
						width: 20%;
						height: 60%;
						display: flex;
						border-radius: 4px;
						justify-content: center;
						align-items: center;
						color: var(--size_color);
						background: rgba(79, 147, 177, 1);
						font-weight: 400;
					}
				}
			}

			.Choosethepast {
				background: url(../assets/mengang.png) no-repeat;
				background-size: 100% 100%;
				width: 100%;
				height: 418px;
				display: flex;
				flex-wrap: wrap;
				margin: 0 auto;

				.Choosethepast-titel {
					width: 100%;
					height: 15%;
					font-weight: 400;
					color: var(--size_color);
					display: flex;
					justify-content: center;
					align-items: center;
					text-align: center;
					font-size: calc(100vw * 36 / 1920);
				}

				.checkboxes {
					margin: 0 auto;
					width: 90%;
					height: 70%;
					display: flex;
					flex-wrap: wrap;

					.checkboxes_one {
						width: 100%;
						height: 10%;
						display: flex;
						align-items: center;
						font-size: calc(100vw * 20 / 1920);

						input {
							width: 18px;
							height: 18px;
							border: 1px solid var(--border_color1);
							background-color: var(--background_color);
						}

						.table {
							font-size: 18px;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: var(--size_color);
							font-size: calc(100vw * 20 / 1920);
							margin-left: 2%;
						}

						input:checked+.table {
							font-size: 18px;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: var(--size_color1);
						}

						input {
							width: 18px;
							height: 18px;
							background-color: var(--background_color);
							border: 1px solid var(--size_color);
							border-radius: 2px;
							color: var(--size_color2);
							text-align: center;
							line-height: 15px;
							-webkit-appearance: none;
							-moz-appearance: none;
							-ms-appearance: none;
							-o-appearance: none;
							appearance: none;
							outline: none;
							cursor: pointer;
							outline: 0;
							line-height: 1;
							vertical-align: middle;
							display: inline-block;
							position: relative;
							white-space: nowrap;
						}

						input:hover {
							border-color: var(--size_color);
						}

						input:checked {
							color: var(--size_color1);
							background-color: var(--background_color);
							border: 1px solid var(--border_color1);
						}

						input:checked:after {
							transform: rotate(45deg) scaleY(1);
							height: 10px;
							left: 6px;
							top: 1px;
							width: 4px;
							box-sizing: content-box;
							content: '';
							border: 1px solid var(--border_color1);
							border-left: 0;
							border-top: 0;
							position: absolute;
							transition: transform 0.15s ease-in 0.05s,
								-webkit-transform 0.15s ease-in 0.05s;
							transform-origin: center;
						}
					}

					.checkboxes_two {
						width: 100%;
						height: 90%;
						flex-wrap: wrap;
						align-items: flex-start;
						overflow-y: auto;

						.check_one {
							display: flex;
							align-items: center;
							width: 32%;
							height: 12%;
							margin-top: 2%;
							float: left;
							font-size: calc(100vw * 20 / 1920);

							input {
								width: 18px;
								height: 18px;
								border: 1px solid var(--border_color1);
								background-color: var(--background_color);
							}

							.table {
								margin-left: 2%;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: var(--size_color);
							}

							input:checked+.table {
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: var(--size_color1);
							}

							input {
								width: 18px;
								height: 18px;
								background-color: var(--background_color);
								border: 1px solid var(--size_color);
								border-radius: 2px;
								color: var(--background_color);
								text-align: center;
								line-height: 15px;
								-webkit-appearance: none;
								-moz-appearance: none;
								-ms-appearance: none;
								-o-appearance: none;
								appearance: none;
								outline: none;
								cursor: pointer;
								outline: 0;
								line-height: 1;
								vertical-align: middle;
								display: inline-block;
								position: relative;
								white-space: nowrap;
							}

							input:hover {
								border-color: var(--size_color1);
							}

							input:checked {
								color: var(--size_color1);
								background-color: var(--background_color);
								border: 1px solid var(--size_color1);
							}

							input:checked:after {
								transform: rotate(45deg) scaleY(1);
								height: 10px;
								left: 6px;
								top: 1px;
								width: 4px;
								box-sizing: content-box;
								content: '';
								border: 1px solid var(--size_color1);
								border-left: 0;
								border-top: 0;
								position: absolute;
								transition: transform 0.15s ease-in 0.05s,
									-webkit-transform 0.15s ease-in 0.05s;
								transform-origin: center;
							}
						}
					}

					// /*修改滚动条样式*/
					.checkboxes_two::-webkit-scrollbar {
						width: 10px;
						height: 10px;
						/**/
					}

					.checkboxes_two::-webkit-scrollbar-track {
						border-radius: 2px;
					}

					.checkboxes_two::-webkit-scrollbar-thumb {
						background: #4f93b1;
						border-radius: 10px;
					}

					.checkboxes_two::-webkit-scrollbar-thumb:hover {
						background: #4f93b1;
					}

					.checkboxes_two::-webkit-scrollbar-corner {
						background: #4f93b1;
					}
				}

				.button {
					width: 100%;
					height: 15%;
					display: flex;
					justify-content: center;
					align-items: center;

					.buttons {
						width: 20%;
						height: 60%;
						display: flex;
						border-radius: 4px;
						text-align: center;
						justify-content: center;
						align-items: center;
						background: var(--size_color1);
						color: var(--size_color);
						font-size: calc(100vw * 20 / 1920);
					}
				}
			}

			.appearing {
				background: url(../assets/bg.png) no-repeat;
				background-size: 100% 100%;
				width: 315px;
				height: 300px;
				margin: 0 auto;
				z-index: 9999;

				.login-titel {
					width: 100%;
					height: 17%;
					display: flex;
					font-size: calc(100vw * 22 / 1920);
					color: var(--size_color1);

					.login-titel-1 {
						width: 85%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.login-titel-2 {
						width: 15%;
						height: 100%;
						display: flex;
						justify-content: center;

						.login-titel-2-1 {
							width: 23px;
							height: 23px;
							display: flex;
							justify-content: center;
							margin-top: 12%;
							background: url(../assets/car_buttom_delete.png) no-repeat;
							background-size: 100% 100%;
						}
					}
				}

				.anount {
					width: 100%;
					height: 26%;
					margin-top: 5%;
					flex-wrap: wrap;
					font-size: calc(100vw * 18 / 1920);

					.anount-title {
						width: 100%;
						height: 30%;
						display: flex;
						align-items: center;
						color: var(--size_color1);
						margin-top: 5%;
						text-indent: 2em;
						font-size: calc(100vw * 18 / 1920);
					}

					.anount-input {
						margin-top: 5%;
						width: 90%;
						height: 40%;
						margin: 0 auto;

						.selectes {
							width: 100%;
							height: 100%;

							.el-input {
								.el-input__inner {
									width: 280px !important;
									height: 40px !important;
									border: 1px solid rgba(122, 230, 255, 1) !important;
									border-radius: 4px !important;
									background: transparent !important;
									font-size: 14px !important;
									color: var(--size_color1);
								}

								.el-select__caret {
									color: rgba(79, 147, 177, 1);
								}

								.el-input__inner::-webkit-input-placeholder {
									font-size: 13px;
									color: rgba(79, 147, 177, 1);
								}
							}

							.select-option {
								background-color: #3c7a96 !important;
								// background: transparent !important;

								.el-select-dropdown__empty {
									font-size: 14px;
									font-family: Microsoft YaHei;
									font-weight: 400;
									color: rgba(222, 222, 222, 1);
								}

								.el-select-dropdown__item {
									font-size: 14px;
									font-family: Microsoft YaHei;
									font-weight: 400;
									color: rgba(222, 222, 222, 1);
								}

								.el-select-dropdown__item:hover {
									background: rgba(122,
											230,
											255,
											0.3) !important;
								}

								.el-select-dropdown__item.hover {
									background: transparent !important;
									background: rgba(122,
											230,
											255,
											0.3) !important;
								}
							}
						}
					}

					.button {
						width: 40%;
						height: 35%;
						display: flex;
						border-radius: 4px;
						justify-content: center;
						align-items: center;
						margin: 0 auto;
						margin-top: 15%;
						color: var(--size_color);
						background: rgba(79, 147, 177, 1);
						font-weight: 400;
					}
				}
			}

			.car-mod {
				background: url(../assets/bg.png) no-repeat;
				background-size: 100% 100%;
				width: 315px;
				height: 370px;
				margin: 0 auto;
				z-index: 9999;

				.login-titel {
					width: 100%;
					height: 17%;
					display: flex;
					font-size: calc(100vw * 28 / 1920);
					color: var(--size_color1);

					.login-titel-1 {
						width: 85%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.login-titel-2 {
						width: 15%;
						height: 100%;
						display: flex;
						justify-content: center;

						.login-titel-2-1 {
							width: 23px;
							height: 23px;
							display: flex;
							justify-content: center;
							margin-top: 12%;
							background: url(../assets/car_buttom_delete.png) no-repeat;
							background-size: 100% 100%;
						}
					}
				}

				.anount {
					width: 100%;
					height: 26%;
					flex-wrap: wrap;
					font-size: calc(100vw * 22 / 1920);

					.anount-title {
						width: 100%;
						height: 30%;
						display: flex;
						align-items: center;
						color: var(--size_color1);
						text-indent: 2em;
						font-size: calc(100vw * 22 / 1920);
					}

					.anount-input {
						width: 90%;
						height: 40%;
						margin: 0 auto;
					}

					.button {
						width: 40%;
						height: 30%;
						display: flex;
						border-radius: 4px;
						justify-content: center;
						align-items: center;
						margin: 0 auto;
						margin-top: 10%;
						color: var(--size_color);
						background: rgba(79, 147, 177, 1);
						font-weight: 400;
					}
				}
			}

			.circumstances-mod {
				background: url(../assets/bg.png) no-repeat;
				background-size: 100% 100%;
				width: 400px;
				height: 430px;
				margin: 0 auto;
				z-index: 9999;

				.login-titel {
					width: 100%;
					height: 17%;
					display: flex;
					font-size: calc(100vw * 28 / 1920);
					color: var(--size_color1);

					.login-titel-1 {
						width: 85%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.login-titel-2 {
						width: 15%;
						height: 100%;
						display: flex;
						justify-content: center;

						.login-titel-2-1 {
							width: 23px;
							height: 23px;
							display: flex;
							justify-content: center;
							margin-top: 12%;
							background: url(../assets/car_buttom_delete.png) no-repeat;
							background-size: 100% 100%;
						}
					}
				}

				.anount {
					width: 100%;
					height: 20%;
					flex-wrap: wrap;
					font-size: calc(100vw * 22 / 1920);

					.anount-title {
						width: 100%;
						height: 30%;
						display: flex;
						align-items: center;
						color: var(--size_color1);
						text-indent: 2em;
						font-size: calc(100vw * 22 / 1920);
					}

					.anount-input {
						width: 90%;
						height: 40%;
						margin: 0 auto;
					}

					.button {
						width: 40%;
						height: 30%;
						display: flex;
						border-radius: 4px;
						justify-content: center;
						align-items: center;
						margin: 0 auto;
						margin-top: 10%;
						color: var(--size_color);
						background: rgba(79, 147, 177, 1);
						font-weight: 400;
					}
				}
			}

			.keyboard {
				width: 900px;
				height: 400px;
				position: fixed;
				background: url('../assets/querenruchang.png') no-repeat;
				background-size: 100% 100%;
				background-color: #1f2f43;
				position: relative;
				margin-top: 5%;
				z-index: 9999;
				border: solid 1px red;

				.content {
					width: 70%;
					height: 100%;
					float: left;

					.content-one {
						width: 100%;
						height: 50%;
						overflow: auto;

						.number-one {
							width: 7%;
							height: 15%;
							float: left;
							border: solid 1px var(--size_color1);
							margin-top: 1.5%;
							margin-left: 2.5%;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: calc(100vw * 24 / 1920);
						}
					}

					/*修改滚动条样式*/
					.content-one::-webkit-scrollbar {
						width: 10px;
						height: 10px;
						/**/
					}

					.content-one::-webkit-scrollbar-track {
						border-radius: 2px;
					}

					.content-one::-webkit-scrollbar-thumb {
						background: #4f93b1;
						border-radius: 10px;
					}

					.content-one::-webkit-scrollbar-thumb:hover {
						background: #4f93b1;
					}

					.content-one::-webkit-scrollbar-corner {
						background: #4f93b1;
					}

					.content-two {
						width: 100%;
						height: 50%;

						.number-one {
							width: 7%;
							height: 15%;
							float: left;
							border: solid 1px var(--size_color1);
							margin-top: 3%;
							margin-left: 3%;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: calc(100vw * 24 / 1920);
						}
					}

					/*修改滚动条样式*/
					.content-two::-webkit-scrollbar {
						width: 10px;
						height: 10px;
						/**/
					}

					.content-two::-webkit-scrollbar-track {
						border-radius: 2px;
					}

					.content-two::-webkit-scrollbar-thumb {
						background: #4f93b1;
						border-radius: 10px;
					}

					.content-two::-webkit-scrollbar-thumb:hover {
						background: #4f93b1;
					}

					.content-two::-webkit-scrollbar-corner {
						background: #4f93b1;
					}
				}

				.content-number {
					float: left;
					width: 30%;
					height: 100%;

					.head {
						width: 100%;
						height: 18%;
						display: flex;
						align-items: center;

						.del {
							width: 25px;
							height: 25px;
							display: flex;
							justify-content: center;
							align-items: center;
							background: url('../assets/jiantou.png');
							background-size: 100% 100%;
							margin-left: auto;
							margin-right: 3%;
							margin-top: -10px;
						}
					}

					.number {
						width: 100%;
						height: 82%;
						overflow: auto;

						.number-one {
							width: 24%;
							height: 20%;
							float: left;
							border: solid 1px var(--size_color1);
							margin-top: 2%;
							margin-left: 6%;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: calc(100vw * 36 / 1920);
						}
					}

					/*修改滚动条样式*/
					.number::-webkit-scrollbar {
						width: 10px;
						height: 10px;
						/**/
					}

					.number::-webkit-scrollbar-track {
						border-radius: 2px;
					}

					.number::-webkit-scrollbar-thumb {
						background: #4f93b1;
						border-radius: 10px;
					}

					.number::-webkit-scrollbar-thumb:hover {
						background: #4f93b1;
					}

					.number::-webkit-scrollbar-corner {
						background: #4f93b1;
					}
				}
			}
		}
	}

	.btn3 {
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(112, 209, 244, 1);
		cursor: pointer;
	}

	.btn1 {
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(180, 242, 242, 1);
		cursor: pointer;
		margin-left: 21px;
	}

	.btn2 {
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		margin-left: 21px;
		cursor: pointer;
		color: rgba(112, 209, 244, 1);
	}

	.chuangchangjiesuan {
		position: fixed;
		z-index: 1888;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin-left: auto;
		margin-right: auto;
		margin-top: auto;
		margin-bottom: auto;
		background-color: rgba(0, 0, 0, 0.3);

		.chuangchangjiesuan-one {
			background: url(../assets/chuchangjiesuan.png) no-repeat;
			background-size: 100% 100%;
			width: 1140px;
			height: 700px;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin-left: auto;
			margin-right: auto;
			margin-top: auto;
			margin-bottom: auto;
			border-radius: 2px;
			-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
			box-sizing: border-box;

			.right_box_img {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				div {
					height: 90px;
					width: 246px;
					text-align: center;
					line-height: 90px;
					font-size: 40px;
					overflow: hidden;

					img {
						height: 90px;
						width: 246px;
						overflow: hidden;
					}
				}
			}

			.title {
				font-size: 18px;
				color: rgba(255, 255, 255, 1);
				text-align: right;
				margin-right: 99px;
				margin-top: 30px;

				span {
					font-size: 30px;
					color: rgba(255, 255, 255, 1);
				}
			}

			.input {
				display: flex;
				margin-left: 50px;
				margin-top: 22px;

				div {
					margin-left: 16px;

					p {
						font-size: 14px;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(204, 204, 204, 1);
					}

					input {
						width: 234px;
						height: 36px;
						margin-top: 8px;
						border: 1px solid rgba(77, 138, 161, 1);
						border-radius: 5px;
						background: transparent !important;
						font-size: 16px;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
						outline: none;
						text-indent: 14px;
					}
				}
			}

			.ledes {
				display: flex;

				.one {
					.title-one1 {
						margin-top: 23px;
						margin-left: 66px;
						font-size: 14px;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(204, 204, 204, 1);
					}

					.ledxianshi {
						margin-top: 8px;
						margin-left: 56px;
						width: 480px;
						height: 78px;
						font-size: 14px;
						color: rgba(88, 230, 241, 1);

						.led {
							display: inline-block;
							width: 224px;
							line-height: 20px;
							margin-left: 16px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							word-break: break-all;
						}
					}
				}

				.two {
					.title-one1 {
						margin-top: 23px;
						margin-left: 50px;
						font-size: 14px;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(204, 204, 204, 1);
					}

					.ledxianshi {
						margin-top: 8px;
						margin-left: 50px;
						width: 480px;
						height: 78px;
						font-size: 14px;
						color: rgba(88, 230, 241, 1);

						.led {
							display: inline-block;
							width: 224px;
							margin-left: 16px;
							line-height: 20px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							word-break: break-all;
						}
					}
				}
			}

			.imgesss {
				margin-left: 66px;
				display: flex;

				.one {
					width: 224px;
					height: 184px;
					background: rgba(38, 68, 97, 1);
					border: 1px solid rgba(122, 230, 255, 1);
					opacity: 0.3;
				}

				.two {
					width: 246px;
					height: 184px;
					background: url(../assets/jiao2.png) no-repeat;
					background-size: 100%;
				}
			}

			.btn_one {
				display: inline-block;
				width: 114px;
				height: 39px;
				background: rgba(77, 138, 161, 1);
				opacity: 0.8;
				border-radius: 4px;
				font-size: 16px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(254, 255, 255, 1);
				text-align: center;
				line-height: 39px;
				cursor: pointer;
			}

			.btn_two {
				display: inline-block;
				width: 114px;
				height: 39px;
				background: rgba(79, 147, 177, 1);
				margin-left: 28px;
				border-radius: 4px;
				text-align: center;
				line-height: 39px;
				font-size: 16px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(254, 255, 255, 1);
				cursor: pointer;
			}
		}
	}
}

//  background: transparent !important;</style>
